<template>
  <div>
    <h1>表单生成器</h1>
    <FormCreator ref="FormCreator" title="登录页面" :items="loginItems"></FormCreator>
    <el-button @click="submit">submit!</el-button>
  </div>
</template>

<script>
import FormCreator from "./components/FormCreator.vue";
export default {
  components: {
    FormCreator,
  },
  data() {
    return {
      loginItems: [
        // 第一行
        [
          // 第一行第一列
          {
            label: "用户名",
            // 初始值
            value: "admin",
            // 类型
            type: "input",
            // elemenui栅格
            colspan: 12,
            // 当前字段唯一标识
            key: "username",
            // 原生属性
            attrs: {placeholder: '请输入用户名'}
          },
          {
            label: "密码",
            // 初始值
            value: "",
            // 类型
            type: "input",
            // elemenui栅格
            colspan: 12,
            key: "password",
          },
        ],
        // 第二行
        [
          {
            label: "性别",
            // 类型
            type: "select",
            // elemenui栅格
            colspan: 12,
            value: 1,
            key: 'gender',
            options: [
              {
                label: "男",
                value: 1,
              },
              {
                label: "女",
                value: 2,
              },
            ],
          }
        ],
      ],
    };
  },
  methods: {
    submit() {
      this.$refs.FormCreator.getFormData()
    }
  }
};
</script>

<style></style>
